<script setup lang="ts">
import { ref, onMounted } from 'vue'
const searchTime = ref('')
const today = new Date();
searchTime.value = today.toISOString().split('T')[0];

const coalListData = ref(['1#煤场', '2#煤场', '3#煤场'])
const coalIndex = ref(0)

function clickCoal(index: number) {
    coalIndex.value = index
    getPileReport()
}

import { GetAllBunkerData,AreaByBunkerId,pileReport } from '@/api'

// 煤场
const bunkerData = ref<any>([])
function getGetAllBunkerData(){
    GetAllBunkerData().then(res=>{
        console.log('煤场----',res.data)
        bunkerData.value = res.data
        getPileReport()
    })
}

// 煤堆一览表
const coalPileBunkerMsg = ref<any>({})
const coalStockpileRecords = ref<any>({})
const coalExtractionRecords = ref<any>({})
const dailyReport = ref<any>({})
const getPileReport = () => {
    pileReport(bunkerData.value[coalIndex.value].bunkerId, searchTime.value).then(res=>{
        console.log('煤堆一览表----',res.data.dailyReport)
        coalPileBunkerMsg.value = res.data.coalPileBunkerMsg
        coalStockpileRecords.value = res.data.coalStockpileRecords
        coalExtractionRecords.value = res.data.coalExtractionRecords
        dailyReport.value = res.data.dailyReport
    })
}

function changeTime(){
    getPileReport();
}

onMounted(()=>{
    getGetAllBunkerData();
})

</script>
<template>
    <div class="flex_bg pile_flex">
        <div class="pile_left">
            <div class="record_search" style="background: #fff;">
                <div class="name">所属煤场:</div>
                <ul class="record_search_tab">
                    <li :class="coalIndex == index ? 'hover' : ''" v-for="(item, index) in bunkerData" @click="clickCoal(index)">
                        {{ item.bunkerName }}</li>
                </ul>
                <el-date-picker v-model="searchTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择" :clearable="false" :editable="false" @change="changeTime"  />
                
            </div>
            <ul class="pile_info">
                <li>
                    <span>总存煤量(吨)</span>
                    <p v-if="coalPileBunkerMsg">{{ coalPileBunkerMsg.zcml }}</p>
                </li>
                <li>
                    <span>剩余库存空间(吨)</span>
                    <p v-if="coalPileBunkerMsg">{{ coalPileBunkerMsg.sykckj }}</p>
                </li>
                <li>
                    <span>存煤可用(天)</span>
                    <p v-if="coalPileBunkerMsg">{{ coalPileBunkerMsg.cmky }}</p>
                </li>
                <li>
                    <span>今日进煤量(吨)</span>
                    <p v-if="coalPileBunkerMsg">{{ coalPileBunkerMsg.jrjml }}</p>
                </li>
                <li>
                    <span>今日耗煤量(吨)</span>
                    <p v-if="coalPileBunkerMsg">{{ coalPileBunkerMsg.jrhml }}</p>
                </li>
            </ul>
            <div class="pile_photo mt15">
                <img class="ph"src="../../assets/img/ph_3d.jpg" alt="">
            </div>
        </div>
        <div class="pile_right table_info small2">
            <h3>煤场情况一览表</h3>
            <table>
                <tr>
                    <td>截止日期：{{ dailyReport.reportTime }}</td>
                    <td>煤质更新至{{ dailyReport.lastestVoyage }}航次</td>
                    <td>预估总存量</td>
                    <td>{{dailyReport.estimatedStorageAmount}}吨</td>
                </tr>
            </table>

            <div style="width: 100%;overflow-x: auto;">
            <table>
                <tr class="bg_yellow">
                    <th class="table_hd" style="min-width: 100px;"></th>
                    <td  style="width: 1020px;" v-for="(item,index) in dailyReport.records" :colspan="item.records.length">
                        {{ item.areaRange }}
                    </td>
                </tr>
                <tr>
                    <th class="table_hd" >存量</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.stockpileWeight }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">航次</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.voyage }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">母船</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.shipName }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">港口</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.harbour }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">煤种</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.coalType }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">水分</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.totalMoisture }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">挥发分</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.volatileMatter }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">固定碳</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.fixedCarbon }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">灰分</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.ashContent }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">硫S</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.sulfur }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">灰熔点t2</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.ashFusionPointT2 }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">发热量</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.calorificValue }}</td>
                    </template>
                </tr>
                <tr>
                    <th class="table_hd">堆期</th>
                    <template v-for="(item,index) in dailyReport.records">
                        <td v-for="itema in item.records">{{ itema.pileDate }}</td>
                    </template>
                </tr>
            </table>
            
            </div>
            <table>
                <tr class="table_bg">
                    <td>预估总存量</td>
                    <td>{{ dailyReport.estimatedStorageAmount }}</td>
                    <td>硫加权平均值</td>
                    <td>{{ dailyReport.sulfurWeighing }}</td>
                    <td>热值权平均值</td>
                    <td>{{ dailyReport.heatWeighing }}</td>
                </tr>
            </table>

            <h3 class="mt15">堆煤作业记录</h3>
            <table>
                <tr>
                    <th>堆煤时间</th>
                    <th>堆煤重量</th>
                    <th>煤种</th>
                    <th>品名/编码</th>
                    <th>航次</th>
                    <th>船名</th>
                    <th>供应商</th>
                    <th>操作班组</th>
                </tr>
                <tr v-if="coalStockpileRecords.length == 0">
                    <td colspan="8">无</td>
                </tr>
                <tr v-else v-for="(item,index) in coalStockpileRecords" :key="index">
                    <td>{{ item.stockpileTime }}</td>
                    <td>{{ item.stockpileWeight }}</td>
                    <td>{{ item.coalType }}</td>
                    <td><p class="flashing-text">{{ item.productNameOrCode }}</p></td>
                    <td>{{ item.voyage }}</td>
                    <td>{{ item.shipName }}</td>
                    <td>{{ item.supplier }}</td>
                    <td>{{ item.operationTeam }}</td>
                </tr>
            </table>

            <h3 class="mt15">取煤作业记录</h3>
            <table>
                <tr>
                    <th>取煤时间</th>
                    <th>取煤重量</th>
                    <th>取煤区域</th>
                    <th>入炉名称</th>
                    <th>入炉位置</th>
                    <th>入炉煤质</th>
                    <th>操作班组</th>
                </tr>
                <tr v-if="coalExtractionRecords.length == 0">
                    <td colspan="7">无</td>
                </tr>
                <tr v-else v-for="(item,index) in coalExtractionRecords" :key="index">
                    <td>{{ item.extractionTimePeriod }}</td>
                    <td>{{ item.extractionWeight }}</td>
                    <td>{{ item.extractionArea }}</td>
                    <td>{{ item.furnaceName }}</td>
                    <td>{{ item.furnaceLocation }}</td>
                    <td><p class="flashing-text">{{ item.furnaceCoalQuality }}</p></td>
                    <td>{{ item.operationTeam }}</td>
                </tr>
            </table>

        </div>
    </div>
</template>
<style scoped lang="scss">
.pile_flex{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    .pile_left{
        width: 40%;
        padding-right: 15px;
    }
    .pile_right{
        width: 60%;
        background: #fff;
        border: 1px solid #E0E5ED;
    }
}
th.table_hd{
    position: sticky !important;
    left:0;
    span{
        display: block;
        width: 70px;
        text-align: center;
    }
    
}
</style>